<template>
  <div>
    <!-- 导航 -->
    <el-menu
      :default-active="activeIndex2"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
      background-color="#1e90ff"
      text-color="#fff"
      active-text-color="#ffd04b"
    >
      <el-menu-item index="1">首页</el-menu-item>
      <el-submenu index="2">
        <template slot="title">消息</template>
        <el-menu-item index="2-1">最新消息</el-menu-item>
        <el-menu-item index="2-2">过往消息</el-menu-item>
      </el-submenu>
      <el-submenu index="3" class="ger">
        <template slot="title">个人资料</template>
        <el-menu-item index="2-1" @click="bjziliao">编辑资料</el-menu-item>
        <el-menu-item index="2-2" @click="gerenzx">个人中心</el-menu-item>
      </el-submenu>
    </el-menu>
    <!-- 搜索框 -->
    <div class="header" :class="navBarFixed == true ? 'navBarWrap' :''">
      <div style="margin-top: 15px;margin-bottom: 20px;">
        <el-input placeholder="搜索职位、人才" v-model="input3" class="input-with-select">
          <el-select v-model="select" slot="prepend" placeholder="请选择城市" class="ss">
            <el-option label="西安" value="1"></el-option>
            <el-option label="北京" value="2"></el-option>
            <el-option label="上海" value="3"></el-option>
            <el-option label="广州" value="4"></el-option>
          </el-select>
          <el-button slot="append" icon="el-icon-search"></el-button>
        </el-input>
      </div>
    </div>
    <!-- 轮播图 -->
    <el-carousel :interval="4000" type="card" height="400px">
      <el-carousel-item v-for="item in pics" :key="item.url">
        <img :src="item.url" />
      </el-carousel-item>
    </el-carousel>
    <!-- 热门职位 -->
    <div class="remen">
      <div class="remen1">热门职位：</div>
      <ul class="remen2">
        <li>java</li>
        <li>C++</li>
        <li>PHP</li>
        <li>Web前端</li>
        <li>UI设计师</li>
        <li>产品经理</li>
        <li>产品运营</li>
      </ul>
    </div>
    <!-- 推荐人才 -->
    <div class="tuij">
      <div class="xian"></div>
      <div class="tuij1">推荐人才</div>
      <div class="xian"></div>
    </div>
    <div class="zhiwei">
      <div class="zhiwei1">
        <div class="xm"></div>
        <div class="job"></div>
        <div class="school"></div>
        <div class="major"></div>
      </div>
      <div class="zhiwei1">
        <div class="xm">{{name}}</div>
        <div class="job">{{job}}</div>
        <div class="school">{{school}}</div>
        <div class="major">{{major}}</div>
      </div>
      <div class="zhiwei1"></div>
      <div class="zhiwei1"></div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      activeIndex: "1",
      activeIndex2: "1",
      input3: "",
      select: "",
      navBarFixed: false,
      pics: [
        { url: require("../assets/timg.jpg") },
        { url: require("../assets/time4.jpg") },
        { url: require("../assets/time6.jpg") },
        { url: require("../assets/time3.jpg") }
      ],
      name: "",
      job: "",
      age: "",
      school: "",
      major: "",
      exp: ""
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    bjziliao() {
      this.$router.push({
        path: "/bjziliao"
      });
    },
    gerenzx() {
      this.$router.push({
        path: "/gerenzx"
      });
    },
    hidemenu() {
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      //当滚动超过50时，实现吸顶效果（导航高度为50）
      if (scrollTop > 49) {
        this.navBarFixed = true;
      } else {
        this.navBarFixed = false;
      }
    }
    // sousuo(){
    //   this.axios.post("/hr/selectjobs", {
    //     zhanghao: this. userName,

    //   }).then(res=>{

    //   })
    // }
  },
  mounted() {
    window.addEventListener("scroll", this.hidemenu); //监听滚动事件
    // this.axios({
    //   method: "post",
    //   url: "/hr/grzl",
    //   params: {
    //     openid: openid
    //   }
    // }).then(res => {
    //   console.log(res);
    //   this.name = res.data[0].name;
    //   this.job = res.data[0].job;
    //   this.age= res.data[0].age;
    //   this.school = res.data[0].school;
    //   this.major = res.data[0].major;
    //   this.exp= res.data[0].exp;
    // });
  }
};
</script>
<style  scoped>
* {
  margin: 0;
  padding: 0;
}
.ger {
  float: right;
}
.el-select .el-input {
  width: 130px;
}
.input-with-select .el-input-group__prepend {
  background-color: #fff;
}
.el-input-group--append .el-input__inner,
.el-input-group__prepend {
  width: 110px;
}
.el-input-group {
  width: 40%;
}
.ss {
  width: 125px;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}
.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}
.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.navBarWrap {
  position: fixed;
  top: 0;
  z-index: 999;
  width: 100%;
}
.remen {
  width: 60%;
  height: 66px;
  margin: 0px auto;
}
.remen1 {
  width: 20%;
  height: 63px;
  float: left;
  line-height: 60px;
  text-align: center;
}
.remen2 {
  width: 74%;
  height: 48px;
  float: left;
  line-height: 48px;
  margin-left: 0;

  list-style: none;
}
.remen2 > li {
  width: 13.5%;
  float: left;
  color: yellowgreen;
}
.tuij {
  width: 300px;
  height: 60px;
  margin: 0px auto;
  line-height: 60px;
}
.xian {
  width: 60px;
  height: 30px;
  float: left;
  border-bottom: 1px solid gray;
}
.tuij1 {
  width: 130px;
  height: 60px;
  float: left;
  font-size: 23px;
  font-weight: 500;
}
.zhiwei {
  width: 90%;
  height: 650px;
  margin: 0 auto;
  border: 1px solid red;
}
.zhiwei1 {
  width: 22%;
  height: 120px;
  float: left;

  margin-left: 27px;
  margin-top: 20px;
  border: 1px solid blue;
}
.xm {
  width: 100px;
  height: 40px;
  line-height: 30px;
  text-align: center;
  float: left;
  border: 1px solid green;
}
.job {
  width: 50px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border: 1px solid greenyellow;
  float: left;
  margin-left: 10px;
}
.school {
  width: 145px;
  height: 50px;
  margin-top: 10px;
  line-height: 50px;
  text-align: center;
  float: left;
  border: 1px solid pink;
}
.major {
  width: 95px;
  height: 50px;
  line-height: 50px;
  margin-top: 10px;
  text-align: center;
  float: left;
  border: 1px solid yellow;
  margin-left: 15px;
}
</style>